import React, { Component } from 'react';
import '../styles/MyList.scss'
import pic1 from '../assets/18.gif'
import pic2 from '../assets/19.gif'
import pic3 from '../assets/20.gif'
import pic4 from '../assets/21.gif'

class MyList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            currentIndex: 0,
            tabs: ['综合', '销量', '新品', '价格', '筛选'],
            productslist: [
                { pic: pic1, name: 'COSME DECORTE 黛珂植物新韵沁莹化妆水 20...', ori_price: 270, sec_price: 215 },
                { pic: pic2, name: 'COSME DECORTE 黛珂牛油果乳液 150ml...', ori_price: 273, sec_price: 205 },
                { pic: pic3, name: 'COSME DECORTE 黛珂植物新韵沁莹化妆水 20...', ori_price: 270, sec_price: 155 },
                { pic: pic4, name: 'COSME DECORTE 黛珂植物新韵沁莹化妆水 20...', ori_price: 270, sec_price: 195 },
            ]
        }
    }
    handleClick(index) {
        this.setState({ currentIndex: index })
        if (this.state.tabs[index]=='价格') {
            this.state.productslist.sort((a,b)=>{
                return b['sec_price']-a['sec_price']
            })
        }
    }
    render() {
        return (
            <div className='list'>
                <div className="tabs">
                    {
                        this.state.tabs.map((item, index) => {
                            return (
                                <div className={'tabs_item ' + (this.state.currentIndex == index ? 'active' : '')} key={index} onClick={() => { this.handleClick(index) }}>
                                    {item}
                                </div>
                            )
                        })
                    }
                </div>
                <div className="productslist">
                    {
                        this.state.productslist.map((item, index) => {
                            return (
                                <div className="productslist_item" key={index}>
                                    <img src={item.pic} alt="" />
                                    <div className="name">{item.name}</div>
                                    <span className="ori_price">原价 ￥{item.ori_price}</span>
                                    <div className="sec_price">抢购价 ￥<span>{item.sec_price}</span></div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default MyList;